<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>2048</title>

  <link rel="shortcut icon" href="favicon.ico">
  <link rel="apple-touch-icon" href="meta/apple-touch-icon.png">
  <link rel="apple-touch-startup-image" href="meta/apple-touch-startup-image-640x1096.png"
    media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)"> <!-- iPhone 5+ -->
  <link rel="apple-touch-startup-image" href="meta/apple-touch-startup-image-640x920.png"
    media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)">
  <!-- iPhone, retina -->

  <link href="styles/game/main.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" type="text/css" href="../../assets/css/keen-dashboards.css" />

  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">

  <meta name="HandheldFriendly" content="True">
  <meta name="MobileOptimized" content="320">
  <meta name="viewport"
    content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0, maximum-scale=1, user-scalable=no, minimal-ui">
</head>

<body>
  <div class="container">
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="../">
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
            viewBox="76.39 132.243 15.35 22" width="20" height="20" fill="#777">
            <defs>
              <path id="a"
                d="M88.31 136.63c.29-.28.43-.63.43-1.05 0-.41-.14-.76-.43-1.04-.08-.09-.78-.78-.86-.87-.29-.28-.64-.43-1.05-.43-.41 0-.76.15-1.05.43-.75.75-6.78 6.77-7.53 7.53-.29.28-.43.63-.43 1.04 0 .42.14.76.43 1.05.75.75 6.78 6.77 7.53 7.53.29.28.64.42 1.05.42.41 0 .76-.14 1.05-.42.08-.09.78-.78.86-.87.29-.29.43-.63.43-1.04 0-.41-.14-.76-.43-1.05-.37-.38-2.24-2.25-5.61-5.61 3.37-3.37 5.24-5.24 5.61-5.62z" />
            </defs>
            <use xlink:href="#a" />
            <use xlink:href="#a" />
          </svg>
        </a>
        <a class="navbar-brand" href="./">Keen 2048</a>
      </div>
      <div class="navbar-collapse">
        <ul class="navbar-nav nav main-nav">
          <li><a href="https://keen.io">Home</a></li>
          <li><a href="https://keen.io/team">Team</a></li>
          <li><a href="https://github.com/keenlabs/dashboards/tree/gh-pages/layouts/hero-sidebar">Source</a>
          </li>
          <li><a href="https://groups.google.com/forum/#!forum/keen-io-devs">Community</a></li>
          <li><a href="http://stackoverflow.com/questions/tagged/keen-io?sort=newest&pageSize=15">Technical
              Support</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="container-2048">
    <div class="header">
      <div class="heading">
        <h1 class="title">Keen 2048</h1>
        <div class="scores-container">
          <div class="score-container">0</div>
          <div class="best-container">0</div>
        </div>
      </div>

      <div class="above-game">
        <p class="game-intro">Join the numbers and get to the <strong>2048 tile!</strong></p>
        <a class="restart-button">New Game</a>
      </div>
    </div>

    <table class="main-container">
      <tr>
        <td width="50%">
          <div class="game-container">
            <div class="game-message">
              <p></p>
              <div class="lower">
                <a class="keep-playing-button">Keep going</a>
                <a class="retry-button">Try again</a>
              </div>
            </div>
            <div class="grid-container">
              <div class="grid-row">
                <div class="grid-cell"></div>
                <div class="grid-cell"></div>
                <div class="grid-cell"></div>
                <div class="grid-cell"></div>
              </div>
              <div class="grid-row">
                <div class="grid-cell"></div>
                <div class="grid-cell"></div>
                <div class="grid-cell"></div>
                <div class="grid-cell"></div>
              </div>
              <div class="grid-row">
                <div class="grid-cell"></div>
                <div class="grid-cell"></div>
                <div class="grid-cell"></div>
                <div class="grid-cell"></div>
              </div>
              <div class="grid-row">
                <div class="grid-cell"></div>
                <div class="grid-cell"></div>
                <div class="grid-cell"></div>
                <div class="grid-cell"></div>
              </div>
            </div>

            <div class="tile-container"></div>
          </div>
        </td>
        <td width="50%">
          <div id="moves-container" style="padding-left: 20px;"></div>
          <br><br>
          <div id="stats-container" style="padding-left: 20px;"></div>
        </td>
      </tr>
    </table>

    <p class="game-explanation">
      <strong class="important">How to play:</strong> Use your <strong>arrow keys</strong> to move the tiles. When two
      tiles with the same number touch, they <strong>merge into one!</strong>
    </p>
    <hr>
    <p>
      <strong class="important">Note:</strong> This site is the official version of 2048. You can play it on your phone
      via <a href="http://git.io/2048">http://git.io/2048.</a> All other apps or sites are derivatives or fakes, and
      should be used with caution.
    </p>
    <hr>
    <p>
      Created by <a href="http://gabrielecirulli.com" target="_blank">Gabriele Cirulli.</a> Based on <a
        href="https://itunes.apple.com/us/app/1024!/id823499224" target="_blank">1024 by Veewo Studio</a> and
      conceptually similar to <a href="http://asherv.com/threes/" target="_blank">Threes by Asher Vollmer.</a>
    </p>
  </div>

  <!-- keen-tracking@4 -->
  <script src="https://cdn.jsdelivr.net/npm/keen-tracking@4" type="text/javascript"></script>

  <!-- keen-analysis@3 -->
  <script src="https://cdn.jsdelivr.net/npm/keen-analysis@3" type="text/javascript"></script>

  <!-- keen-dataviz@3 -->
  <link href="https://cdn.jsdelivr.net/npm/keen-dataviz@3/dist/keen-dataviz.min.css" rel="stylesheet" />
  <script src="https://cdn.jsdelivr.net/npm/keen-dataviz@3/dist/keen-dataviz.min.js" type="text/javascript"></script>

  <!-- Demo Assets -->
  <script type="text/javascript" src="js/game/bind_polyfill.js"></script>
  <script type="text/javascript" src="js/game/classlist_polyfill.js"></script>
  <script type="text/javascript" src="js/game/animframe_polyfill.js"></script>
  <script type="text/javascript" src="js/game/keyboard_input_manager.js"></script>
  <script type="text/javascript" src="js/game/html_actuator.js"></script>
  <script type="text/javascript" src="js/game/grid.js"></script>
  <script type="text/javascript" src="js/game/tile.js"></script>
  <script type="text/javascript" src="js/game/local_storage_manager.js"></script>
  <script type="text/javascript" src="js/game/game_manager.js"></script>
  <script type="text/javascript" src="js/game/application.js"></script>

  <!-- Project Analytics -->
  <script type="text/javascript" src="../../assets/js/keen-analytics.js"></script>
  <script>
    function toggleMenu() {
      const toggleBtn = document.querySelector('.navbar-toggle');

      toggleBtn.addEventListener('click', (e) => {
        let menu;
        if (e.currentTarget.dataset.target) {
          menu = document.querySelector(e.currentTarget.dataset.target);
        }
        if (menu) menu.classList.toggle('collapsed');
      });
    }

    window.addEventListener('DOMContentLoaded', toggleMenu);
  </script>

</body>

</html>